<template>
	<div class="main">
		<h6 @click="back" style="cursor: pointer;">
			<Icon type="md-arrow-back" />返回上一页
		</h6>
		<h1 class="margin">Create collectible</h1>
		<p class="margin">
			Choose “Single” if you want your collectible to be one of a kind or
			“Multiple” if you want to sell one collectible multiple times
		</p>
		<div class="flex sb margin">
			<div class="item" @click="clickItem">
				<img src="../imgs/single.png" alt="" srcset="" />
				<h4>single</h4>
			</div>
			<div class="item" @click="clickItem">
				<img src="../imgs/multiple.png" alt="" srcset="" />
				<h4>multiple</h4>
			</div>
		</div>
		<p class="margin">
			We do not own your private keys and cannot access your funds without
			your confirmation
		</p>
	</div>
</template>

<script>
export default {
	methods: {
		back() {
			window.history.go(-1);
		},
		clickItem() {
			this.$router.push('/create/erc721');
		},
	},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main {
	width: 500px;
	margin: 50px auto;
}
.item {
	width: 230px;
	height: 300px;
	border: 1px solid #ddd;
	border-radius: 5px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-direction: column;
}
.item img {
	width: 100px;
	height: 150px;
}
</style>
